<template>
  <div class="description">
    <img class="description-title animated bounceInDown" :src="require('../assets/images/description-title.png')" alt="">
    <img @click="showTip = true" class="description-button animated pulse infinite" :src="require('../assets/images/description-button.png')" alt="">
    <!-- <input capture="camera" ref="file" class="file" type="file" accept="image/*" @change="readImage"> -->
    <input ref="file"  capture="camera"  class="file" type="file" accept="image/*" @change="readImage">
    <div class="bottom animated fadeInUp">
      <div class="trapezoid1"></div>
      <div class="trapezoid2"></div>
      <div class="screen">
        <div class="head-list">
          <transition name="fade">
            <img v-if="headIndex===index" v-for="(item, index) in headList" :value="item" :key="index" :src="item" alt="">
          </transition>
        </div>
        <fountain :waterHeight="'1.8rem'"></fountain>
      </div>
    </div>
    <div v-if="showTip" class="mask animated fadeIn">
      <div class="pop box box-ac box-jc tx-c box-ver animated bounceInDown">
        <!-- <img class="close" :src="require('../assets/images/close2.png')" alt=""> -->
        <p class="title">拍照说明</p>
        <p>拍照上传禁止上传带有色情，暴力，广告的照片，如有上传，将追究其法律责任。</p>
        <img @click="selectPhoto()" class="btn-sure" :src="require('../assets/images/btn-sure.png')" alt="">
      </div>
    </div>
    <cloud></cloud>
  </div>
</template>

<script>
import lrz from 'lrz'
import fountain from '@/components/fountain'
import cloud from '@/components/cloud'
export default {
  name: 'description',
  components: {
    cloud,
    fountain
  },
  data () {
    return {
      headList: [
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg')
      ],
      headIndex: 0,
      timer: null,
      showTip: false
    }
  },
  mounted () {
    this.initScreen()
  },
  methods: {
    initScreen () {
      this.timer = setInterval(() => {
        if (this.headIndex >= this.headList.length - 1) {
          this.headIndex = 0
        } else {
          this.headIndex++
        }
      }, 5000)
    },
    readImage ($event) {
      this.$store.commit('isLoading', true)
      var self = this
      var file = $event.target.files[0]
      lrz(file, { width: 640 })
        .then(rst => {
          this.$store.commit('base64', rst.base64)
          this.$router.push({
            path: '/edit'
          })
        })
        .always(() => {
          this.$store.commit('isLoading', false)
        })
    },
    selectPhoto () {
      this.showTip = false
      this.$refs.file.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.mask{
  position:fixed;
  width:100%;
  height:100%;
  z-index:66;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.7);
  .pop{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-2.3rem;
    margin-top:-2.6rem;
    width:3.1rem;
    height:5.2rem;
    border-radius:.2rem;
    background-color:#FFF;
    font-size:.3rem;
    padding:.2rem .7rem;
    line-height:.4rem;
    font-weight:500;
    .title{
      font-size:.44rem;
    }
    .close{
      width:.5rem;
      position:absolute;
      right:.3rem;
      top:.3rem;
    }
    .btn-sure{
      margin-top:.2rem;
      width:2.9rem;
    }
  }
}
.description{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.description-title{
  display:block;
  width:6rem;
  margin: 0 auto;
  margin-top:1.3rem;
}
.description-button{
  display:block;
  margin:.7rem auto;
  width:2.9rem;
}
.file{
  display:none;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  z-index:3;
  width:100%;
  height:2.2rem;
  background-color:#56d1c8;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:2.4rem;
  height:0;
  border-width:0 1.5rem 2.2rem 1.5rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:2rem;
  border-width:0 .66rem 1rem .66rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
// 312*648
.screen{
  position:absolute;
  bottom:1.7rem;
  left:50%;
  transform: translateX(-50%);
  border:.1rem solid #FFF;
  width:2.1rem;
  height:4.36154rem;
  z-index:1;
  .head-list{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
  }
  img{
    position: absolute;
    bottom:0;
    width:100%;
  }
}
</style>
